<template>
  <router-layout>
    <div class="me">
        <div class="top-box">
            <div class="title-box">
                <div class="avatar-box">
                <van-row type="flex" align="center">
                    <van-col span="8" class="avatar-col">
                        <img class="headimg" :src="info.portrait?info.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'" alt>
                    </van-col>
                    <van-col span="16">
                        <p class="user-name">{{info.user_name}}</p>
                        <router-link to="/Medal" class="bottom-box">
                            <div class="my-xz">
                                <p>我的勋章</p>
                                <img src="https://gw.alicdn.com/tfs/TB1zGisU9zqK1RjSZPxXXc4tVXa-35-34.png" alt>
                            </div>
                        </router-link>
                    </van-col>
                </van-row>
                </div>
            </div>
            <div class="collect-box">
                <router-link :to="{name:'myModulePost',query:{id:2}}" class="collect-content">
                    <p class="num">{{ dataInfo.collectCount || 0 }}</p>
                    <p class="text">我的收藏</p>
                    <div class="line"></div>
                </router-link>
                <router-link to="commentMyModule" class="collect-content">
                    <p class="num">{{ dataInfo.commentCount || 0 }}</p>
                    <p class="text">评论我的</p>
                    <div class="line"></div>
                </router-link>
                <router-link to="fabulousMyModule" class="collect-content">
                    <p class="num">{{ dataInfo.likeCount || 0 }}</p>
                    <p class="text">赞我的</p>
                </router-link>
            </div>
        </div>
        <div class="select-box">
            <van-cell-group>
                <van-cell title="我的积分" to="GainHome" center is-link>
                    <span class="integral-num">{{ integral }}</span>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1zgKFUVzqK1RjSZFvXXcB7VXa-44-45.png" class="custom-icon" />
                </van-cell>
                <van-cell title="我的帖子" :to="{name:'myModulePost',query:{id:1}}" center is-link>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1X_SJUZfpK1RjSZFOXXa6nFXa-38-45.png" class="custom-icon" />
                </van-cell>
                <van-cell title="我的抽奖" to="MyPrizeModule" center is-link>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1ZaqyU9zqK1RjSZFHXXb3CpXa-44-44.png" class="custom-icon" />
                </van-cell>
                <van-cell title="我的活动" to="MyJoin" center is-link>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1krOyU5rpK1RjSZFhXXXSdXXa-39-39.png" class="custom-icon" />
                </van-cell>
                <van-cell title="我的问卷" :to="{name:'SurveyPartake',query:{id:1}}" center is-link>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1SbKAU7zoK1RjSZFlXXai4VXa-41-39.png" class="custom-icon" />
                </van-cell>
                <van-cell title="我的投票" to="MyVote" center is-link>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1th5DU7PoK1RjSZKbXXX1IXXa-36-39.png" class="custom-icon" />
                </van-cell>
                <van-cell to="Accept" center is-link>
                    <template slot="title">
                      <span class="custom-text">微&nbsp;&nbsp;认&nbsp;&nbsp;可</span>
                    </template>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1FSseVyrpK1RjSZFhXXXSdXXa-40-38.png" class="custom-icon" />
                </van-cell>
            </van-cell-group>
        </div>
        <div class="select-box2">
            <van-cell-group>
                <van-cell title="设置" to="Setting" center is-link>
                    <van-icon slot="icon" name="https://gw.alicdn.com/tfs/TB1xUGCUVzqK1RjSZFCXXbbxVXa-36-34.png" class="custom-icon" />
                </van-cell>
            </van-cell-group>
        </div>
    </div>
  </router-layout>
</template>
<script>
import { AmountntegralRecord, get_listCollectCount, get_listCommentCount, get_listLikeCount } from "@/api/admin";

export default {
  name: "sqbxMe",
  data() {
    return {
      info: {},
      portrait: "",
      imgsrc: "",
      integral:"",
      listQuery:{
        company_id: localStorage.getItem("companyId") - 0
      },
      dataInfo:{
        collectCount: 0,
        commentCount: 0,
        likeCount: 0
      }
    };
  },
  methods: {
    async Amountntegral() {
      let { data } = await AmountntegralRecord();
      this.integral = data.data.amonutScore;
      localStorage.setItem("integral", this.integral);
    },
    async listCollectCount() {
      let { data } = await get_listCollectCount(this.listQuery);
      if (data.status == 100) {
        this.dataInfo.collectCount = data.data.amount
      }

    },
    async listCommentCount() {
      let { data } = await get_listCommentCount(this.listQuery);
      if (data.status == 100) {
        this.dataInfo.commentCount = data.data.amount
      }
    },
    async listLikeCount() {
      let { data } = await get_listLikeCount(this.listQuery);
      if (data.status == 100) {
        this.dataInfo.likeCount = data.data.amount
      }
    },
  },
  created() {
    this.Amountntegral();
    this.listCollectCount()
    this.listCommentCount()
    this.listLikeCount()
    this.info = JSON.parse(localStorage.getItem("user"));
    this.info.portrait = localStorage.getItem("headimgurl");
  }
};
</script>
<style lang="scss" scoped>
.me{
    padding-bottom: 64px;
    background: rgb(243, 248, 252);
    .top-box {
        position: relative;
        width: 100%;
    }
    .title-box {
        width: 100%;
        background: -webkit-linear-gradient(left, #049eff , #48ddfd); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #049eff, #48ddfd); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #049eff, #48ddfd); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #049eff , #48ddfd); /* 标准的语法 */
        padding: 31px 31px 48px;
        .avatar-box {
            .user-name {
                color: #fff;
                font-size: 18px;
            }
            .headimg {
                width: 82px;
                height: 82px;
                border-radius: 50%;
                border: 5px solid rgba(255, 255, 255, 0.2);
            }
            .my-xz {
                margin-top: 15px;
                width: 60%;
                border: 1px solid #fff;
                color: #fff;
                padding: 4px 14px;
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 30px;
                background-color: rgba(255, 255, 255, 0.2);
                img {
                    width: 20px;
                    height: 20px;
                    }
                }
        }
    }
    .collect-box {
        position: absolute;
        bottom: -50px;
        left: 16px;
        right: 16px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 0 1px 1px #ccc;
        display: flex;
        justify-content: space-between;
        .collect-content {
            width: 33.3333%;
            text-align: center;
            margin: 13px 0;
            position: relative;
            .num {
                color: #ccc;
            }
            .text {
                padding-top: 8px;
                font-size: 14px;
            }
            .line{
              position: absolute;
              right: 0;
              top: 0;
              background: -webkit-linear-gradient( #fff , #48ddfd, #fff ); /* Safari 5.1 - 6.0 */
              background: -o-linear-gradient(  #fff , #48ddfd, #fff); /* Opera 11.1 - 12.0 */
              background: -moz-linear-gradient(v); /* Firefox 3.6 - 15 */
              background: linear-gradient( #fff , #48ddfd, #fff); /* 标准的语法 */
              width: 1px;
              height: 100%;
            }
        }
        .collect-content:nth-child(3){
            border-right: none;
        }
    }
    .select-box {
        margin-top: 66px;
        background-color: #fff;
        .integral-num{
          padding-right: 18px;
          color: rgb(255, 155, 0);
        }
        .custom-icon {
            margin-right: 20px;
            width: 26px;
            height: 26px;
        }
    }
    .select-box2 {
        margin-top: 14px;
        .custom-icon {
            margin-right: 20px;
            width: 26px;
            height: 26px;
        }
    }
}
</style>
